{include file="public/header" /}
<link rel="stylesheet" href="https://unpkg.com/mditor@1.0.5/dist/css/mditor.min.css" />
<style>
.img-box{width:250px;border:1px solid #ccc;height:120px;text-align:center;line-height:120px;font-size:40px;color:#888; cursor:pointer;}
.img-box i{line-height:120px;}
.carousel-img{height:120px}
.badge-s{margin:5px 10px;cursor:pointer;display:inline-block;padding:5px 10px;border-radius:3px;border:1px solid #ddd;}
</style>
</head>
<body>
<div id="box" v-cloak class="box">
	<el-form ref="form" :model="form" label-width="90px" :rules="rules" label-position="top"> 
		<el-row :gutter="20">
			<el-col :span="18">
				<el-form-item label="标题" prop ="title">
					<el-input placeholder="请输入文章标题" v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="内容">
					<textarea name="editor" id="editor"></textarea>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="标签">
					<div @click="dialogVisible = true">
					  	<el-input placeholder="请输入内容" v-model="badges" readonly>
					    	<template slot="append" ><i class="el-icon-search"></i></template>
					  	</el-input>
					</div>
				</el-form-item>
				<el-form-item label="开启评论">
					<el-switch v-model="form.eval"></el-switch>
				</el-form-item>
				<el-form-item label="封面" prop="cover">
					<label for="carousel">
						<img :src="form.cover" class="carousel-img" v-if="form.cover">
						<div class="img-box" v-else>
							<i class="el-icon-upload"></i>
						</div>
					</label>
					<input type="file" id="carousel" style="display:none;" @change="upimg()">
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-form-item>
			<el-button type="primary" @click="submit('form')">立即提交</el-button>
		</el-form-item>
	</el-form>
	<el-dialog title="文章标签" :visible.sync="dialogVisible">
    	<span v-for ="(item,key) in badge" class="badge-s" @click="selectBadge(key)">{{item.name}}</span>
    </el-dialog>
</div>
<script src="https://unpkg.com/mditor@1.0.5/dist/js/mditor.min.js"></script>
<!-- <script type="text/javascript" src="/static/markdown/src/js/jquery.js"></script>
<script type="text/javascript" src="/static/markdown/src/mditor.js"></script> -->
<script>
new Vue({
	el : '#box',
	data:{
		badge : {$badge | raw},
		dialogVisible : false,
		form :{
			cover : '',
			title : '',
			content : '',
			badge : '',
			eval : true
		},
		badges : '',
		rules : {
			title : [
				{ required: true, message: '请输入文章标题', trigger: 'blur' }
			],
			cover : [
				{ required: true, message: '请选择封面图片', trigger: 'blur' }
			],
		}
	},
	mounted:function(){
		var mditor =  new Mditor.fromTextarea(document.getElementById('editor'));
	},
	methods:{
		selectBadge:function(key){
			this.form.badge = this.badge[key].id;
			this.badges = this.badge[key].name;
			this.dialogVisible = false;
		},
		//发布文章
		submit:function(formName){
			var that = this;
			this.form.content = document.getElementById('editor').value;
			this.$refs[formName].validate((valid) => {
	    		  if (valid) {
	    			  $.post("{:url('addArticle')}",this.form,function(res){
	    				  if (res.code) {
	    					  toastSuccess(that,res.msg,function(){
	    						  parent.location.reload();
	    					  });
	    				  } else {
	    					  toastError(that.res.msg);
	    				  }
	    			  });
            	  } else {
            		  toastError(this,'表单信息不完整');
              	  return false;
            	 }
            });
		},
		//上传图片
		upimg:function(){
			var that   = this;
			var file = event.currentTarget.files[0];
			var reader = new FileReader();
			reader.readAsDataURL(file);//调用自带方法进行转换
            reader.onload = function(e) {
            	var img=this.result;
            	that.form.cover = img;
            }
		},
	}
});
</script>
</body>
</html>